<template>
  <div style="margin-top: 15px;margin-left: 5px">
    <!--主要功能按钮-->
    <div class="buttons">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">增加</el-button>
      <el-button type="" icon="el-icon-edit" @click="alter">修改</el-button>
      <el-button type="info" icon="el-icon-delete" @click="del">销户</el-button>
      <el-button type="warning" icon="el-icon-star-off" @click="recharge">续款</el-button>
      <el-button type="success" icon="el-icon-download" @click="output">EXCEL</el-button>
      <el-button type="danger" icon="el-icon-circle-check" @click="active">激活</el-button>
    </div>

    <!--查询-->
    <div class="search-info">
      <el-row>
        <el-col :span="3">
          <el-select v-model="searchVal" placeholder="" @change="changeSearch">
            <el-option
              v-for="item in searchInfo"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input v-model="searchInput" placeholder="" style="width: 90%;margin-left: 5%"
                    v-if="searchVal!=='4'"></el-input>
          <el-select v-model="searchInput" placeholder="" style="width: 90%;margin-left: 5%" v-else>
            <el-option
              v-for="dict in dict.type.yqg_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="15">
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="" icon="el-icon-refresh" @click="research">重置</el-button>
          <el-button type="" plain icon="el-icon-view" @click="rechargeDetail">充值明细</el-button>
          <el-button type="" plain icon="el-icon-collection-tag" @click="consumptionDetail">消费明细</el-button>
        </el-col>
      </el-row>
    </div>

    <!--主表格-->
    <div class="search-table">
      <el-table v-loading="loading" :data="memberList" border @selection-change="handleSelectionChange" height="650"
                empty-text="玉泉宫" style="overflow-x: auto">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column type="index" label="序号" width="55" align="center" :index="getIndex"/>
        <el-table-column label="卡号" align="center" prop="cardNumber"/>
        <el-table-column label="主卡号" align="center" prop="masterCardNumber"/>
        <el-table-column label="会员柜号" align="center" prop="memberCounterNumber"/>
        <el-table-column label="姓名" align="center" prop="name"/>
        <el-table-column label="性别" align="center" prop="sex"/>
        <el-table-column label="售卡人" align="center" prop="cardSeller"/>
        <el-table-column label="类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yqg_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column label="卡性质" align="center" prop="cardNature">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yqg_card_nature" :value="scope.row.cardNature"/>
          </template>
        </el-table-column>
        <el-table-column label="卡状态" align="center" prop="cardStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yqg_card_status" :value="scope.row.cardStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="开户时间" align="center" prop="accountOpeningTime" min-width="120px"/>
        <el-table-column label="消费价值" align="center" prop="consumptionValue"/>
        <el-table-column label="累计消费" align="center" prop="accumulatedConsumption"/>
        <el-table-column label="剩余金额" align="center" prop="residualAmount"/>
        <el-table-column label="实存金额" align="center" prop="actualAmount"/>
        <!--<el-table-column label="存款消费" align="center" prop="depositConsumption"/>-->
        <!--<el-table-column label="净余额" align="center" prop="netBalance"/>-->
        <el-table-column label="剩余积分" align="center" prop="residualIntegral"/>
      </el-table>
    </div>

    <!-- 添加或修改会员对话框 -->
    <el-dialog :title="title" :visible.sync="openA" width="680px" append-to-body :close-on-click-modal="false"
               @close="reset">
      <el-form ref="form" :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="卡号" prop="cardNumber" label-width="80px">
              <el-input v-model="form.cardNumber" placeholder="请输入卡号" :disabled="disable"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password" label-width="100px" :rules="[{required: true, message: '密码不能为空'}]">
              <el-input v-model="form.password" placeholder="请输入密码" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name" label-width="80px" :rules="[{required: true, message: '姓名不能为空'}]">
              <el-input v-model="form.name" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex" label-width="100px">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 220px">
                <el-option
                  v-for="item in sexInfo"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证" prop="idCard" label-width="80px">
              <el-input v-model="form.idCard" placeholder="请输入身份证"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="dateBirth" label-width="100px">
              <el-date-picker clearable
                              v-model="form.dateBirth"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="移动电话" prop="mobilePhone" label-width="80px"
                          :rules="[{required: true, message: '手机号不能为空'}]">
              <el-input v-model="form.mobilePhone" placeholder="请输入移动电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宅电" prop="homePhone" label-width="100px">
              <el-input v-model="form.homePhone" placeholder="请输入宅电"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作单位" prop="workUnit" label-width="80px">
              <el-input v-model="form.workUnit" placeholder="请输入工作单位"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="address" label-width="100px">
              <el-input v-model="form.address" placeholder="请输入地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主卡号" prop="masterCardNumber" label-width="80px">
              <el-input v-model="form.masterCardNumber" placeholder="请输入主卡号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员柜号" prop="memberCounterNumber" label-width="100px">
              <el-input v-model="form.memberCounterNumber" placeholder="请输入会员柜号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="type" label-width="80px" :rules="[{required: true, message: '未选择会员卡类型'}]">
              <el-select v-model="form.type" placeholder="请选择会员卡类型" style="width: 240px" :disabled="disable">
                <el-option
                  v-for="dict in dict.type.yqg_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡性质" prop="cardNature" label-width="100px"
                          :rules="[{required: true, message: '未选择卡性质'}]">
              <el-select v-model="form.cardNature" placeholder="请选择卡性质" style="width: 220px" :disabled="disable"
                         v-if="form.type !== '1' && form.type !== ''">
                <el-option
                  v-for="dict in dict.type.yqg_card_nature"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
              <el-select v-model="form.cardNature" placeholder="请选择卡性质" style="width: 220px" :disabled="disable"
                         v-else-if="form.type !== '0' && form.type !== ''">
                <el-option
                  v-for="(item,index) in cardN"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="form.cardNature" placeholder="请选择卡性质" style="width: 220px" :disabled="disable" v-else>
                <el-option
                  v-for="(item,index) in cardNEmpty"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实存金额" prop="actualAmount" label-width="80px"
                          :rules="[{type: 'number', message: '金额只能为数字'}]">
              <el-input v-model.number="form.actualAmount" placeholder="请输入实存金额" :disabled="disable"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到账金额" prop="consumptionValue" label-width="100px"
                          :rules="[{type: 'number', message: '金额只能为数字'}]" v-show="form.type !== '1'">
              <el-input v-model.number="form.consumptionValue" placeholder="请输入到账金额" :disabled="disable"/>
            </el-form-item>
            <el-form-item label="到账次数" prop="consumptionValue" label-width="100px"
                          :rules="[{type: 'number', message: '次数只能为数字'}]" v-show="form.type === '1'">
              <el-input v-model.number="form.consumptionValue" placeholder="请输入到账次数" :disabled="disable"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="售卡人" prop="cardSeller" label-width="80px">
              <el-input v-model="form.cardSeller" placeholder="请输入售卡人" :disabled="disable"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充值方式" prop="" label-width="100px" :rules="[{required: true, message: '未选择充值方式'}]"
                          v-show="form.actualAmount!==0">
              <el-select v-model="form.note" placeholder="请选择支付方式" style="width: 220px" :disabled="disable">
                <el-option
                  v-for="(item,index) in chargeMethod"
                  :key="index"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item label="备注" prop="note" label-width="100px">-->
            <!--  <el-input v-model="form.note" placeholder="请输入备注"/>-->
            <!--</el-form-item>-->
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--续款-->
    <el-dialog title="会员卡续款" :visible.sync="openM" width="680px" append-to-body :close-on-click-modal="false"
               @close="reset">
      <!--文字-->
      <div class="text">
        <el-row>
          <el-col :span="8">
            <div>卡号：{{ form.cardNumber }}</div>
          </el-col>
          <el-col :span="8">
            <div>姓名：{{ form.name }}</div>
          </el-col>
          <el-col :span="8" v-if="form.type!=='1'">
            <div>账户余额：{{ form.residualAmount }}</div>
          </el-col>
          <el-col :span="8" v-else>
            <div>账户剩余次数：{{ form.residualAmount }}</div>
          </el-col>
        </el-row>
      </div>

      <!--输入-->
      <el-form class="charge-money" ref="form" :model="form">
        <el-form-item label="续款金额" label-width="100px" :rules="[{required: true, type: 'number', message: '金额只能为数字'}]">
          <el-input v-model.number="rechargeInput" placeholder="请输入续款金额"/>
        </el-form-item>
        <el-form-item label="到账金额" label-width="100px" :rules="[{required: true, type: 'number', message: '金额只能为数字'}]"
                      v-if="form.type!=='1'">
          <el-input v-model.number="actualInput" placeholder="请输入到账金额"/>
        </el-form-item>
        <el-form-item label="到账次数" label-width="100px" :rules="[{required: true, type: 'number', message: '次数只能为数字'}]"
                      v-else>
          <el-input v-model.number="actualInput" placeholder="请输入到账次数"/>
        </el-form-item>
        <el-form-item label="活动参与" label-width="100px">
          <el-input v-model="eventInput" placeholder="请输入参与的活动"/>
        </el-form-item>
        <el-form-item label="付款方式" label-width="100px">
          <el-select v-model="payMethod" placeholder="请选择支付方式">
            <el-option
              v-for="(item,index) in chargeMethod"
              :key="index"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!--按钮-->
      <div slot="footer">
        <el-button type="primary" @click="charge">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 充值明细 -->
    <el-dialog title="充值明细" :visible.sync="openR" width="700px" append-to-body>
      <el-table v-loading="loading" :data="rechargeList" border height="300" empty-text="玉泉宫">
        <el-table-column type="index" label="序号" width="55" align="center" :index="getIndex"/>
        <el-table-column label="实存金额" align="center" prop="topUpAmount"/>
        <el-table-column label="存储时间" align="center" prop="operatingTime"/>
        <el-table-column label="付款方式" align="center" prop="paymentMethod"/>
        <el-table-column label="操作人姓名" align="center" prop="operator"/>
        <el-table-column label="操作人工号" align="center" prop="userName"/>
        <el-table-column label="参与活动" align="center" prop="note1"/>
      </el-table>
    </el-dialog>

    <!-- 消费明细 -->
    <el-dialog title="消费明细" :visible.sync="openC" width="600px" append-to-body>
      <el-table v-loading="loading" :data="consumptionList" border height="300" empty-text="玉泉宫">
        <el-table-column type="index" label="序号" width="55" align="center" :index="getIndex"/>
        <el-table-column label="消费金额" align="center" prop="amountConsumption"/>
        <el-table-column label="消费时间" align="center" prop="operatingTime"/>
        <el-table-column label="手牌号" align="center" prop="handBrand"/>
        <el-table-column label="收银员姓名" align="center" prop="operator"/>
        <el-table-column label="收银员工号" align="center" prop="userName"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import {addForm, listForm, updateForm, activeCard, getForm, delForm, delForms} from "@/api/module/wtc/form";
import {addConsumption, listConsumption} from "@/api/module/wtc/consumption"

export default {
  dicts: ['yqg_type', 'yqg_card_nature', 'yqg_card_status'],
  data() {
    return {
      // 查询条件可选
      searchInfo: [
        {
          value: "1",
          label: "卡号"
        }, {
          value: "2",
          label: "姓名"
        }, {
          value: "3",
          label: "身份证号"
        }, {
          value: "4",
          label: "类型"
        }, {
          value: "5",
          label: "会员框号"
        }, {
          value: "6",
          label: "售卡人"
        }, {
          // value: "7",
          // label: "付款日期"
          // }, {
          value: "8",
          label: "移动电话"
        }, {
          value: "9",
          label: "主卡号"
        }, {
          value: "10",
          label: "充值次数"
        }, {
          value: "11",
          label: "消费金额"
        }
      ],
      // 查询条件默认
      searchVal: "1",
      // 输入的查询条件
      searchInput: '',
      loading: false,
      // 查询结果
      memberList: [],
      rechargeList: [],
      consumptionList: [],
      // 选中的会员卡
      numbers: [],
      cards: [],
      // 会员表查询参数
      queryParams: {
        cardNumber: null,
        name: null,
        consumptionValue: null,
        accumulatedConsumption: null,
        residualAmount: null,
        residualIntegral: null,
        type: null,
        cardNature: null,
        actualAmount: null,
        depositConsumption: null,
        netBalance: null,
        cancellationDate: null,
        dateUse: null,
        dateBirth: null,
        discountRate: null,
        numberRenewals: null,
        cardStatus: null,
        masterCardNumber: null,
        sex: null,
        giftCardSign: null,
        cardSeller: '',
        password: null,
        redeemPoints: null,
        cumulativeIntegral: null,
        memberCounterNumber: null,
        accountOpeningTime: null,
        discountScheme: null,
        effectiveDate: null,
        idCard: null,
        mobilePhone: null,
        homePhone: null,
        workUnit: null,
        address: null,
        note: null,
        preferentialScheme: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 会员充值消费表查询参数
      queryParamsC: {
        cardNumber: null,
        name: null,
        mobilePhone: null,
        type: null,
        cardNature: null,
        typeOperation: null,
        operatingTime: null,
        topUpAmount: null,
        amountConsumption: null,
        operator: null,
        barBillsId: null,
        handBrand: null,
        userName: null,
        paymentMethod: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openA: false,
      openR: false,
      openC: false,
      openM: false,
      // 表单参数
      form: {
        consumptionValue: 0,
        type: '',
        cardSeller: '',
        accumulatedConsumption: 0,
        residualIntegral: 0,
        actualAmount: 0,
        depositConsumption: 0,
        numberRenewals: 0,
        cardStatus: 1,
        redeemPoints: 0,
        cumulativeIntegral: 0,
        masterCardNumber: '',
        note: '现金',
      },
      sexInfo: [
        {
          value: "男",
        },
        {
          value: "女",
        }
      ],
      rechargeInput: 0,
      actualInput: 0,
      eventInput: '',
      disable: false,
      cardN: [
        {
          value: "3",
          label: "次卡"
        }
      ],
      cardNEmpty: [],
      // 充值方式
      chargeMethod: [
        {
          value: '现金'
        }, {
          value: '银行卡'
        }
      ],
      payMethod: '现金'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      listForm(this.queryParams).then(res => {
        this.memberList = res.rows;
        this.loading = false;
      })
    },
    add() {
      this.openA = true
      this.title = "办卡"
      this.disable = false
    },
    alter() {
      if (this.numbers.length === 0) {
        this.$modal.msgError("请先选择要修改的会员卡")
      } else if (this.numbers.length > 1) {
        this.$modal.msgError("不能同时修改多张会员卡")
      } else {
        const id = this.numbers[0]
        getForm(id).then(res => {
          this.form = res.data
          this.form.actualAmount = parseInt(this.form.actualAmount)
          this.form.consumptionValue = parseInt(this.form.consumptionValue)
          this.openA = true
          this.title = "修改信息"
          this.disable = true
        })
      }
    },
    del() {
      if (this.numbers.length === 0) {
        this.$modal.msgError("请先选择要销户的会员卡")
      } else {
        const ids = this.numbers;
        const cards = this.cards;
        this.$modal.confirm('是否确认注销卡号为"' + cards + '"的会员卡？').then(function () {
          return delForms(ids);
        }).then(() => {
          if (this.searchInput !== '') {
            this.search()
          } else {
            this.getList()
          }
          this.$modal.msgSuccess("销户成功");
        }).catch(() => {
        });
      }
    },
    recharge() {
      if (this.numbers.length === 0) {
        this.$modal.msgError("请先选择要续款的会员卡")
      } else if (this.numbers.length > 1) {
        this.$modal.msgError("不能同时为多张会员卡续款")
      } else {
        const id = this.numbers[0]
        getForm(id).then(res => {
          this.form = res.data
          this.openM = true
        })
      }
    },
    charge() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.consumptionValue = parseInt(this.actualInput) + parseInt(this.form.consumptionValue)
          this.form.residualAmount = parseInt(this.actualInput) + parseInt(this.form.residualAmount)
          this.form.actualAmount = parseInt(this.rechargeInput) + parseInt(this.form.actualAmount)
          // this.form.netBalance = parseInt(this.rechargeInput) + parseInt(this.form.netBalance)
          this.form.numberRenewals = parseInt(this.form.numberRenewals) + 1
          updateForm(this.form).then(() => {
            this.queryParamsC.cardNumber = this.form.cardNumber
            this.queryParamsC.name = this.form.name
            this.queryParamsC.mobilePhone = this.form.mobilePhone
            this.queryParamsC.type = this.form.type
            this.queryParamsC.cardNature = this.form.cardNature
            this.queryParamsC.typeOperation = '0'
            this.queryParamsC.operatingTime = new Date().getTime()
            this.queryParamsC.topUpAmount = this.rechargeInput
            this.queryParamsC.note1 = this.eventInput
            this.queryParamsC.paymentMethod = this.payMethod
            this.queryParamsC.note2 = this.actualInput
            addConsumption(this.queryParamsC).then(() => {
              if (this.form.type !== '1') {
                this.$modal.msgSuccess("会员卡" + this.form.cardNumber + "成功续款" + this.actualInput + "元")
              } else {
                this.$modal.msgSuccess("会员卡" + this.form.cardNumber + "成功续款" + this.actualInput + "次")
              }
              this.openM = false
              this.resetC()
              if (this.searchInput !== '') {
                this.search()
              } else {
                this.getList()
              }
            })
          })
        }
      })
    },
    output() {
      this.download('project/wtc/form/export', {
        ...this.queryParams
      }, `会员卡_${new Date().getTime()}.xlsx`)
    },
    active() {
      if (this.numbers.length === 0) {
        this.$modal.msgError("请先选择要激活的会员卡")
      } else {
        activeCard(this.numbers).then(() => {
          this.$modal.msgSuccess("会员卡激活成功")
          if (this.searchInput !== '') {
            this.search()
          } else {
            this.getList()
          }
        })
      }
    },
    search() {
      if (this.searchInput !== '') {
        if (this.searchVal === '1') {
          this.queryParams.cardNumber = this.searchInput
        } else if (this.searchVal === '2') {
          this.queryParams.name = this.searchInput
        } else if (this.searchVal === '3') {
          this.queryParams.idCard = this.searchInput
        } else if (this.searchVal === '4') {
          this.queryParams.type = this.searchInput
        } else if (this.searchVal === '5') {
          this.queryParams.memberCounterNumber = this.searchInput
        } else if (this.searchVal === '6') {
          this.queryParams.cardSeller = this.searchInput
        } else if (this.searchVal === '7') {
          this.queryParams.dateUse = this.searchInput
        } else if (this.searchVal === '8') {
          this.queryParams.mobilePhone = this.searchInput
        } else if (this.searchVal === '9') {
          this.queryParams.masterCardNumber = this.searchInput
        } else if (this.searchVal === '10') {
          this.queryParams.numberRenewals = this.searchInput
        } else {
          this.queryParams.accumulatedConsumption = this.searchInput
        }
        this.loading = true
        listForm(this.queryParams).then(res => {
          this.memberList = res.rows;
          this.loading = false;
        })
      }
    },
    research() {
      this.memberList = []
      this.queryParams = {
        cardNumber: null,
        name: null,
        consumptionValue: null,
        accumulatedConsumption: null,
        residualAmount: null,
        residualIntegral: null,
        type: null,
        cardNature: null,
        actualAmount: null,
        depositConsumption: null,
        netBalance: null,
        cancellationDate: null,
        dateUse: null,
        dateBirth: null,
        discountRate: null,
        numberRenewals: null,
        cardStatus: null,
        masterCardNumber: null,
        sex: null,
        giftCardSign: null,
        cardSeller: null,
        password: null,
        redeemPoints: null,
        cumulativeIntegral: null,
        memberCounterNumber: null,
        accountOpeningTime: null,
        discountScheme: null,
        effectiveDate: null,
        idCard: null,
        mobilePhone: null,
        homePhone: null,
        workUnit: null,
        address: null,
        note: null,
        preferentialScheme: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      }
      this.searchInput = ''
      this.getList()
    },
    changeSearch() {
      this.searchInput = ''
    },
    rechargeDetail() {
      if (this.numbers.length === 0) {
        this.$modal.msgError("请先选择会员卡")
      } else if (this.numbers.length > 1) {
        this.$modal.msgError("不能同时选择多张会员卡")
      } else {
        this.queryParamsC.cardNumber = this.cards[0]
        this.queryParamsC.typeOperation = '0'
        listConsumption(this.queryParamsC).then(res => {
          this.rechargeList = res.rows
          this.openR = true
        })
      }
    },
    consumptionDetail() {
      if (this.numbers.length === 0) {
        this.$modal.msgError("请先选择会员卡")
      } else if (this.numbers.length > 1) {
        this.$modal.msgError("不能同时选择多张会员卡")
      } else {
        this.queryParamsC.cardNumber = this.cards[0]
        this.queryParamsC.typeOperation = '1'
        listConsumption(this.queryParamsC).then(res => {
          this.consumptionList = res.rows
          this.openC = true
        })
      }
    },
    handleSelectionChange(selection) {
      this.numbers = selection.map(item => item.id)
      this.cards = selection.map(item => item.cardNumber)
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateForm(this.form).then(() => {
              this.$modal.msgSuccess("会员卡信息修改成功")
              this.openA = false
              if (this.searchInput !== '') {
                this.search()
              } else {
                this.getList()
              }
            });
          } else {
            if (this.form.type === '0' && this.form.cardNature === '3') {
              this.$modal.msgError("卡性质有误")
              return
            }
            this.form.residualAmount = this.form.consumptionValue
            this.form.note1 = this.form.actualAmount
            this.form.note2 = this.form.consumptionValue
            if (this.form.masterCardNumber === '') {
              this.form.masterCardNumber = this.form.cardNumber
            }
            this.form.accountOpeningTime = new Date().getTime()
            this.form.giftCardSign = "售卡"
            addForm(this.form).then(() => {
              this.$modal.msgSuccess("办卡成功");
              this.openA = false
              this.getList()
            });
          }
        }
      })
    },
    cancel() {
      this.openA = false
      this.openM = false
    },
    getIndex(index) {
      return index + 1
    },
    reset() {
      this.form = {
        id: null,
        cardNumber: null,
        name: null,
        consumptionValue: 0,
        accumulatedConsumption: 0,
        residualAmount: null,
        residualIntegral: 0,
        type: null,
        cardNature: null,
        actualAmount: 0,
        depositConsumption: 0,
        netBalance: null,
        cancellationDate: null,
        dateUse: null,
        dateBirth: null,
        discountRate: null,
        numberRenewals: 0,
        cardStatus: 1,
        masterCardNumber: '',
        sex: null,
        giftCardSign: null,
        cardSeller: '',
        password: null,
        redeemPoints: 0,
        cumulativeIntegral: 0,
        memberCounterNumber: null,
        accountOpeningTime: null,
        discountScheme: null,
        effectiveDate: null,
        idCard: null,
        mobilePhone: null,
        homePhone: null,
        workUnit: null,
        address: null,
        note: '现金',
        preferentialScheme: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
      this.rechargeInput = 0
      this.eventInput = ''
      this.actualInput = 0
      this.payMethod = '现金'
    },
    resetC() {
      this.queryParamsC = {
        cardNumber: null,
        name: null,
        mobilePhone: null,
        type: null,
        cardNature: null,
        typeOperation: null,
        operatingTime: null,
        topUpAmount: null,
        amountConsumption: null,
        operator: null,
        barBillsId: null,
        handBrand: null,
        userName: null,
        paymentMethod: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.buttons {
  margin-left: 10px;
  margin-top: 25px;
  //width: 50%;

  .el-button {
    width: 120px;
    height: 45px;
    font-size: 18px;
    margin-right: 0.5%;
  }
}

.search-info {
  width: 50%;
  //float: right;
  margin-top: 15px;
  margin-left: 10px;
}

.search-table {
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
}

.text {
  font-size: 20px;
}

.charge-money {
  margin-top: 20px;

  ::v-deep .el-form-item__label {
    font-weight: bold;
    font-size: 18px;
  }
}
</style>
